﻿<!-- faultDetail 故障与限位详情页面 -->
<!DOCTYPE html>
<html>

<head>
    <title>故障历史详情页面</title>
    <style>
        html,
        body {
            width: 99%;
            height: 100%;
        }

        body {
            margin: 10 10 10 10;
            padding: 0;
        }
    </style>
    <script src="other/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="./other/css/notiflix-3.2.5.min.css">
    <script src="./other/js/notiflix-3.2.5.min.js"></script>
    <script src="other/js/iview/vue.min.js"></script>
    <script src="./config.js"></script>
    <script src="other/js/element-ui/index.js"></script>
    <link rel="stylesheet" href="./other/js/element-ui/index.css">
</head>

<body>

    <div id="app">
        <span style="margin-left: 10px;">点地址:</span><span style="color: red;margin-left: 20px;">{{opcAddress}}</span>
        <div>
            <el-table :data="tableData" v-loading="loading" empty-text="三个月内暂无历史数据" stripe style="width: 100%" height="500">
                <el-table-column prop="SHOW_MSG" label="故障详情" align="center">
                </el-table-column>
                <el-table-column prop="ADDTIME" label="出现时间" align="center" :formatter="formatTime">
                </el-table-column>
                <el-table-column prop="UPDATETIME" label="消除时间" align="center" :formatter="formatTime">
                </el-table-column>
                <el-table-column prop="TAGNAME" label="点名" align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>

    <script>

        let faultKey;
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        // 加载
        window.onload = function () {
            faultKey = getUrlParam("key");
            let Component = Vue.extend(Main);
            new Component().$mount('#app');
        };

        let Main = {
            data() {
                return {
                    loading: true,
                    tableData: [],
                    opcAddress:''
                }
            },
            methods: {
                getlist() {
                    this.loading = false;
                    var request = {};
                    request.key = faultKey;
                    request.pageId = g_PageID_Fault;
                    request.cmdType = "GET_FAULT_HIS";
                    vueMain = this;
                    $.ajax({
                        url: g_CenterHttpUrl,
                        contentType: 'application/json',
                        data: JSON.stringify(request),
                        async: true,
                        type: "post",
                        dataType: "json",
                        success: function (rsp) {
                            if (rsp["resCode"] == g_ResCodeSuccess) {
                                vueMain.tableData = rsp["resMsg"]["data"];
                                vueMain.opcAddress=rsp["resMsg"]["address"][0].ADDRESS;
                            }
                            else {
                                Notiflix.Notify.warning("获取故障信息列表数据失败：" + rsp["resMsg"]);
                                vueMain.tableData = [];
                            }
                            this.loading = true;
                        },
                        error: function (rsp) {
                            vueMain.tableData = [];
                            this.loading = true;
                            Notiflix.Notify.failure("获取故障信息列表数据异常");
                        }
                    });
                },
                formatTime(row, column) {
                    let date = row[column.property];
                    if (date) {
                        let dateF = new Date(date);
                        return dateF.Format("yyyy-MM-dd hh:mm:ss")
                    }
                }
            },
            mounted() {
                Notiflix.Notify.init({
                    timeout: g_NotiflixTimeout
                });
                this.getlist();
            }
        }

        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

    </script>
</body>

</html>